<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src&#x2F;pixi&#x2F;InteractionManager.js - Pixi.JS</title>
    <link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
    <script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 1.0.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
            
                <li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
            
                <li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
            
                <li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
            
                <li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
            
                <li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
            
                <li><a href="..&#x2F;classes/Point.html">Point</a></li>
            
                <li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
            
                <li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
            
                <li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
            
                <li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
            
                <li><a href="..&#x2F;classes/Text.html">Text</a></li>
            
                <li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
            
                <li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
            
                <li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
            
                <li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src&#x2F;pixi&#x2F;InteractionManager.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
&#x2F;**
 * @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
 *&#x2F;



&#x2F;**
The interaction manager deals with mouse and touch events. At this moment only Sprite&#x27;s can be interactive.
This manager also supports multitouch.
@class InteractionManager
@constructor
@param stage {Stage}
@type Stage
*&#x2F;
PIXI.InteractionManager = function(stage)
{
	&#x2F;**
	 * a refference to the stage
	 * @property stage
	 * @type Stage
	 *&#x2F;
	this.stage = stage;

	&#x2F;&#x2F; helpers
	this.tempPoint = new PIXI.Point();
	&#x2F;&#x2F;this.tempMatrix =  mat3.create();
	
	this.mouseoverEnabled = true;
	
	&#x2F;**
	 * the mouse data 
	 * @property mouse
	 * @type InteractionData
	 *&#x2F;
	this.mouse = new PIXI.InteractionData();
	
	&#x2F;**
	 * an object that stores current touches (InteractionData) by id reference 
	 * @property touchs
	 * @type Object
	 *&#x2F;
	this.touchs = {};
	
	&#x2F;&#x2F;tiny little interactiveData pool!
	this.pool = [];
	
	this.interactiveItems = [];

	this.last = 0;
}

&#x2F;&#x2F; constructor
PIXI.InteractionManager.constructor = PIXI.InteractionManager;

PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent)
{
	var children = displayObject.children;
	var length = children.length;
	
	&#x2F;&#x2F;this.interactiveItems = [];
	&#x2F;&#x2F;&#x2F; make an interaction tree... {item.__interactiveParent}
	for (var i = length-1; i &gt;= 0; i--)
	{
		var child = children[i];
		
		&#x2F;&#x2F; push all interactive bits
		if(child.interactive)
		{
			iParent.interactiveChildren = true;
			&#x2F;&#x2F;child.__iParent = iParent;
			this.interactiveItems.push(child);
			
			if(child.children.length &gt; 0)
			{
				this.collectInteractiveSprite(child, child);
			}
		}
		else
		{
			child.__iParent = null;
			
			if(child.children.length &gt; 0)
			{
				this.collectInteractiveSprite(child, iParent);
			}
		}
	}
}

PIXI.InteractionManager.prototype.setTarget = function(target)
{
	if (window.navigator.msPointerEnabled) 
	{
		&#x2F;&#x2F; time to remove some of that zoom in ja..
		target.view.style[&quot;-ms-content-zooming&quot;] = &quot;none&quot;;
    	target.view.style[&quot;-ms-touch-action&quot;] = &quot;none&quot;
    
		&#x2F;&#x2F; DO some window specific touch!
	}
	
	
	{
		
		this.target = target;
		target.view.addEventListener(&#x27;mousemove&#x27;,  this.onMouseMove.bind(this), true);
		target.view.addEventListener(&#x27;mousedown&#x27;,  this.onMouseDown.bind(this), true);
	 	document.body.addEventListener(&#x27;mouseup&#x27;,  this.onMouseUp.bind(this), true);
	 	target.view.addEventListener(&#x27;mouseout&#x27;,   this.onMouseUp.bind(this), true);
		
		&#x2F;&#x2F; aint no multi touch just yet!
		target.view.addEventListener(&quot;touchstart&quot;, this.onTouchStart.bind(this), true);
		target.view.addEventListener(&quot;touchend&quot;, this.onTouchEnd.bind(this), true);
		target.view.addEventListener(&quot;touchmove&quot;, this.onTouchMove.bind(this), true);
	}
	
	
	
}

PIXI.InteractionManager.prototype.update = function()
{
	&#x2F;&#x2F; frequency of 30fps??
	var now = Date.now();
	var diff = now - this.last;
	diff = (diff * 30) &#x2F; 1000;
	if(diff &lt; 1)return;
	this.last = now;
	&#x2F;&#x2F;
	
	&#x2F;&#x2F; ok.. so mouse events??
	&#x2F;&#x2F; yes for now :)
	&#x2F;&#x2F; OPTIMSE - how often to check??
	if(this.dirty)
	{
		this.dirty = false;
		
		var len = this.interactiveItems.length;
		
		for (var i=0; i &lt; this.interactiveItems.length; i++) {
		  this.interactiveItems[i].interactiveChildren = false;
		}
		
		this.interactiveItems = [];
		
		if(this.stage.interactive)this.interactiveItems.push(this.stage);
		&#x2F;&#x2F; go through and collect all the objects that are interactive..
		this.collectInteractiveSprite(this.stage, this.stage);
	}
	
	&#x2F;&#x2F; loop through interactive objects!
	var length = this.interactiveItems.length;
	
	if(this.target)this.target.view.style.cursor = &quot;default&quot;;	
				
	for (var i = 0; i &lt; length; i++)
	{
		var item = this.interactiveItems[i];
		if(!item.visible)continue;
		
		&#x2F;&#x2F; OPTIMISATION - only calculate every time if the mousemove function exists..
		&#x2F;&#x2F; OK so.. does the object have any other interactive functions?
		&#x2F;&#x2F; hit-test the clip!
		
		
		if(item.mouseover || item.mouseout || item.buttonMode)
		{
			&#x2F;&#x2F; ok so there are some functions so lets hit test it..
			item.__hit = this.hitTest(item, this.mouse);
			&#x2F;&#x2F; ok so deal with interactions..
			&#x2F;&#x2F; loks like there was a hit!
			if(item.__hit)
			{
				if(item.buttonMode)this.target.view.style.cursor = &quot;pointer&quot;;	
				
				if(!item.__isOver)
				{
					
					if(item.mouseover)item.mouseover(this.mouse);
					item.__isOver = true;	
				}
			}
			else
			{
				if(item.__isOver)
				{
					&#x2F;&#x2F; roll out!
					if(item.mouseout)item.mouseout(this.mouse);
					item.__isOver = false;	
				}
			}
		}
		
		&#x2F;&#x2F; ---&gt;
	}
}

PIXI.InteractionManager.prototype.onMouseMove = function(event)
{
	event.preventDefault();
	
	&#x2F;&#x2F; TODO optimize by not check EVERY TIME! maybe half as often? &#x2F;&#x2F;
	var rect = this.target.view.getBoundingClientRect();
	
	this.mouse.global.x = (event.clientX - rect.left) * (this.target.width &#x2F; rect.width);
	this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height &#x2F; rect.height);
	
	var length = this.interactiveItems.length;
	var global = this.mouse.global;
	
	
	for (var i = 0; i &lt; length; i++)
	{
		var item = this.interactiveItems[i];
		
		if(item.mousemove)
		{
			&#x2F;&#x2F;call the function!
			item.mousemove(this.mouse);
		}
	}
}

PIXI.InteractionManager.prototype.onMouseDown = function(event)
{
	event.preventDefault();
	
	&#x2F;&#x2F; loop through inteaction tree...
	&#x2F;&#x2F; hit test each item! -&gt; 
	&#x2F;&#x2F; ---&gt;---&gt;---&gt;---&gt;
	&#x2F;&#x2F; get interactive items under point??
	&#x2F;&#x2F; ---&gt;---&gt;---&gt;---&gt;
	&#x2F;&#x2F;stage.__i
	var length = this.interactiveItems.length;
	var global = this.mouse.global;
	
	var index = 0;
	var parent = this.stage;
	
	&#x2F;&#x2F; while 
	&#x2F;&#x2F; hit test 
	for (var i = 0; i &lt; length; i++)
	{
		var item = this.interactiveItems[i];
		
		if(item.mousedown || item.click)
		{
			item.__mouseIsDown = true;
			item.__hit = this.hitTest(item, this.mouse);
			
			if(item.__hit)
			{
				&#x2F;&#x2F;call the function!
				if(item.mousedown)item.mousedown(this.mouse);
				item.__isDown = true;
				
				&#x2F;&#x2F; just the one!
				if(!item.interactiveChildren)break;
			}
		}
	}
}

PIXI.InteractionManager.prototype.onMouseUp = function(event)
{
	event.preventDefault();
	var global = this.mouse.global;
	
	
	var length = this.interactiveItems.length;
	var up = false;
	
	for (var i = 0; i &lt; length; i++)
	{
		var item = this.interactiveItems[i];
		
		if(item.mouseup || item.mouseupoutside || item.click)
		{
			item.__hit = this.hitTest(item, this.mouse);
			
			if(item.__hit &amp;&amp; !up)
			{
				&#x2F;&#x2F;call the function!
				if(item.mouseup)
				{
					item.mouseup(this.mouse);
				}
				if(item.__isDown)
				{
					if(item.click)item.click(this.mouse);
				}
				
				if(!item.interactiveChildren)up = true;
			}
			else
			{
				if(item.__isDown)
				{
					if(item.mouseupoutside)item.mouseupoutside(this.mouse);
				}
			}
		
			item.__isDown = false;	
		}
	}
}

PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
{
	var global = interactionData.global;
	
	if(!item.visible)return false;
	
	if(item instanceof PIXI.Sprite)
	{
		var worldTransform = item.worldTransform;
		
		var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
            a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],
            id = 1 &#x2F; (a00 * a11 + a01 * -a10);
		
		var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; 
		var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
		
		var width = item.texture.frame.width;
		var height = item.texture.frame.height;
		
		var x1 = -width * item.anchor.x;
		
		if(x &gt; x1 &amp;&amp; x &lt; x1 + width)
		{
			var y1 = -height * item.anchor.y;
			
			if(y &gt; y1 &amp;&amp; y &lt; y1 + height)
			{
				&#x2F;&#x2F; set the target property if a hit is true!
				interactionData.target = item
				return true;
			}
		}
	}
	else if(item.hitArea)
	{
		var worldTransform = item.worldTransform;
		var hitArea = item.hitArea;
		
		var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
            a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],
            id = 1 &#x2F; (a00 * a11 + a01 * -a10);
		
		var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; 
		var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
		
		var x1 = hitArea.x;
		if(x &gt; x1 &amp;&amp; x &lt; x1 + hitArea.width)
		{
			var y1 = hitArea.y;
			
			if(y &gt; y1 &amp;&amp; y &lt; y1 + hitArea.height)
			{
				return true;
			}
		}
	}
	
	var length = item.children.length;
	
	for (var i = 0; i &lt; length; i++)
	{
		var tempItem = item.children[i];
		var hit = this.hitTest(tempItem, interactionData);
		if(hit)return true;
	}
		
	return false;	
}



PIXI.InteractionManager.prototype.onTouchMove = function(event)
{
	event.preventDefault();
	
	var rect = this.target.view.getBoundingClientRect();
	var changedTouches = event.changedTouches;
	
	for (var i=0; i &lt; changedTouches.length; i++) 
	{
		var touchEvent = changedTouches[i];
		var touchData = this.touchs[touchEvent.identifier];
		
		&#x2F;&#x2F; update the touch position
		touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width &#x2F; rect.width);
		touchData.global.y = (touchEvent.clientY - rect.top)  * (this.target.height &#x2F; rect.height);
	}
	
	var length = this.interactiveItems.length;
	for (var i = 0; i &lt; length; i++)
	{
		var item = this.interactiveItems[i];
		if(item.touchmove)item.touchmove(touchData);
	}
}

PIXI.InteractionManager.prototype.onTouchStart = function(event)
{
	event.preventDefault();
	var rect = this.target.view.getBoundingClientRect();
	
	var changedTouches = event.changedTouches;
	for (var i=0; i &lt; changedTouches.length; i++) 
	{
		var touchEvent = changedTouches[i];
		
		var touchData = this.pool.pop();
		if(!touchData)touchData = new PIXI.InteractionData();
		
		this.touchs[touchEvent.identifier] = touchData;
		touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width &#x2F; rect.width);
		touchData.global.y = (touchEvent.clientY - rect.top)  * (this.target.height &#x2F; rect.height);
		
		var length = this.interactiveItems.length;
		
		for (var j = 0; j &lt; length; j++)
		{
			var item = this.interactiveItems[j];
			
			if(item.touchstart || item.tap)
			{
				item.__hit = this.hitTest(item, touchData);
				
				if(item.__hit)
				{
					&#x2F;&#x2F;call the function!
					if(item.touchstart)item.touchstart(touchData);
					item.__isDown = true;
					item.__touchData = touchData;
					
					if(!item.interactiveChildren)break;
				}
			}
		}
	}
	
}

PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{
	event.preventDefault();
	
	
	var rect = this.target.view.getBoundingClientRect();
	var changedTouches = event.changedTouches;
	
	for (var i=0; i &lt; changedTouches.length; i++) 
	{
		 
		var touchEvent = changedTouches[i];
		var touchData = this.touchs[touchEvent.identifier];
		var up = false;
		touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width &#x2F; rect.width);
		touchData.global.y = (touchEvent.clientY - rect.top)  * (this.target.height &#x2F; rect.height);
		
		var length = this.interactiveItems.length;
		for (var j = 0; j &lt; length; j++)
		{
			var item = this.interactiveItems[j];
			var itemTouchData = item.__touchData; &#x2F;&#x2F; &lt;-- Here!
			item.__hit = this.hitTest(item, touchData);
		
			if(itemTouchData == touchData)
			{
				&#x2F;&#x2F; so this one WAS down...
				
				&#x2F;&#x2F; hitTest??
				
				if(item.touchend || item.tap)
				{
					if(item.__hit &amp;&amp; !up)
					{
						if(item.touchend)item.touchend(touchData);
						if(item.__isDown)
						{
							if(item.tap)item.tap(touchData);
						}
						
						if(!item.interactiveChildren)up = true;
					}
					else
					{
						if(item.__isDown)
						{
							if(item.touchendoutside)item.touchendoutside(touchData);
						}
					}
					
					item.__isDown = false;
				}
				
				item.__touchData = null;
					
			}
			else
			{
				
			}
		}
		&#x2F;&#x2F; remove the touch..
		this.pool.push(touchData);
		this.touchs[touchEvent.identifier] = null;
	}
}

&#x2F;**
@class InteractionData
@constructor
*&#x2F;
PIXI.InteractionData = function()
{
	&#x2F;**
	 * This point stores the global coords of where the touch&#x2F;mouse event happened
	 * @property global 
	 * @type Point
	 *&#x2F;
	this.global = new PIXI.Point();
	
	&#x2F;&#x2F; this is here for legacy... but will remove
	this.local = new PIXI.Point();

	&#x2F;**
	 * The target Sprite that was interacted with
	 * @property target
	 * @type Sprite
	 *&#x2F;
	this.target;
}

&#x2F;**
 * This will return the local coords of the specified displayObject for this InteractionData
 * @method getLocalPosition
 * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
 * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject
 *&#x2F;
PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
{
	var worldTransform = displayObject.worldTransform;
	var global = this.global;
	
	&#x2F;&#x2F; do a cheeky transform to get the mouse coords;
	var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
        a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],
        id = 1 &#x2F; (a00 * a11 + a01 * -a10);
	&#x2F;&#x2F; set the mouse coords...
	return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id,
							   a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id)
}

&#x2F;&#x2F; constructor
PIXI.InteractionData.constructor = PIXI.InteractionData;



    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>
